<template>
	<uni-drawer ref="drawerRef" mode="left" :mask="true" :maskClick="true" :width="280" @change="onDrawerChange">
		<view class="side-drawer">
			<!-- 顶部用户信息 -->
			<view class="user-section">
				<image
					class="avatar"
					:src="user?.isLoggedIn ? (user.avatar || defaultAvatar) : defaultAvatar"
					mode="cover"
					@click="onAvatarClick"
				/>
				<view class="user-info">
					<view class="nickname" v-if="user?.isLoggedIn">{{ user.nickname || '用户' }}</view>
					<view class="nickname muted" v-else @click="emitLogin">请先登录</view>
					<view class="uid" v-if="user?.isLoggedIn && user.uid">ID：{{ user.uid }}</view>
				</view>
			</view>

			<!-- 功能区 -->
			<view class="menu-list">
				<view class="menu-item" @click="goSettings">
					<uni-icons type="gear" :size="22" color="#333" />
					<text class="label">设置</text>
				</view>
				<view class="menu-item" @click="goHistory">
					<uni-icons type="clock" :size="22" color="#333" />
					<text class="label">观看历史</text>
				</view>
				<view class="menu-item" @click="goFavorites">
					<uni-icons type="star" :size="22" color="#333" />
					<text class="label">我的收藏</text>
				</view>
				<view class="menu-item" @click="goFeedback">
					<uni-icons type="chat" :size="22" color="#333" />
					<text class="label">意见反馈</text>
				</view>
			</view>

			<!-- 退出登录 -->
			<view class="logout-section" v-if="user?.isLoggedIn">
				<button class="logout-btn" @click="emitLogout">退出登录</button>
			</view>
		</view>
	</uni-drawer>
</template>

<script setup>
import { ref, defineProps, defineEmits, defineExpose } from 'vue'

const props = defineProps({
	user: {
		type: Object,
		default: () => ({})
	}
})

const emit = defineEmits(['login', 'logout', 'change'])

const drawerRef = ref(null)
const defaultAvatar = 'https://via.placeholder.com/96/CCCCCC/FFFFFF?text=Avatar'

const open = () => {
	if (drawerRef.value) {
		drawerRef.value.open()
	}
}

const close = () => {
	if (drawerRef.value) {
		drawerRef.value.close()
	}
}

const onDrawerChange = (visible) => {
	emit('change', visible)
}

const emitLogin = () => {
	emit('login')
	// 组件内兜底跳转，避免父组件未监听时无反应
	try {
		uni.navigateTo({ url: '/pages/login/login' })
	} catch (e1) {
		try {
			uni.redirectTo({ url: '/pages/login/login' })
		} catch (e2) {
			try {
				if (typeof location !== 'undefined') {
					location.hash = '#/pages/login/login'
				}
			} catch (e3) {}
		}
	}
}

const emitLogout = () => {
	emit('logout')
}

const onAvatarClick = () => {
	if (!props.user?.isLoggedIn) {
		emitLogin()
	}
}

const goSettings = () => {
	uni.showToast({ title: '打开设置', icon: 'none' })
}
const goHistory = () => {
	uni.showToast({ title: '观看历史', icon: 'none' })
}
const goFavorites = () => {
	uni.showToast({ title: '我的收藏', icon: 'none' })
}
const goFeedback = () => {
	uni.showToast({ title: '意见反馈', icon: 'none' })
}

defineExpose({
	open,
	close
})
</script>

<style scoped lang="scss">
.side-drawer {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
}

.user-section {
	display: flex;
	align-items: center;
	padding: 32rpx 24rpx;
	background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%);
}

.avatar {
	width: 112rpx;
	height: 112rpx;
	border-radius: 56rpx;
	background: #eee;
}

.user-info {
	margin-left: 20rpx;
	display: flex;
	flex-direction: column;
}

.nickname {
	font-size: 32rpx;
	color: #111;
	font-weight: 600;
}

.nickname.muted {
	color: #666;
}

.uid {
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #999;
}

.menu-list {
	margin-top: 8rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 28rpx 24rpx;
}

.menu-item .label {
	margin-left: 16rpx;
	font-size: 28rpx;
	color: #333;
}

.logout-section {
	margin-top: auto;
	padding: 24rpx;
}

.logout-btn {
	width: 100%;
	background: #f53f3f;
	color: #fff;
	font-size: 28rpx;
	border-radius: 12rpx;
}
</style>


